<template>
  <div>
    <el-dialog
      title='修改分组'
      :close-on-click-modal="false"
       width="340px"
      :visible.sync="this.dialogVisible"
      append-to-body
      @open="getInit"
      :before-close="handleClose"
      >
      <el-form>
        <el-form-item label="选择分组">
          <el-select
            v-model="groupId"
            class="filter-left"
            placeholder="请选择分组"
            filterable
            size="small"
          >
            <el-option v-for="item,index in options" :key="index" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose()">取 消</el-button>
      <el-button type="primary" @click="submitChangeGroup()">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAction, postAction, getUrlAction, postUrlAction } from '@/api/common'
export default {
  name: 'ChangeGroup',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    id: {
      type: Array,
      default: () => []// 这里想要一个值类型,如果直接写[]就变成了引用类型
    }
  },
  components: {
  },
  created() {
    this.getInit()
  },
  watch: {
    show() {
      this.dialogVisible = this.show
    }
  },
  data: function() {
    return {
      groupId: null,
      tableData: [],
      options: [],
      dialogVisible: this.show
    }
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    getInit() {
      getAction({}, 'EmailConfigGroup/GetGroupList')
        .then((res) => {
          this.options = res.data
        })
    },
    handleClose() {
      this.$emit('update:show', false)
    },
    changeGroup() {
      this.showChangeGroupVisible = true
      console.log('changeGroup')
    },
    submitChangeGroup() {
      if (this.groupId == null) {
        this.$message({
          type: 'info',
          message: '请选择分组后提交'
        })
        return false
      }
      postAction({ id: this.id, groupId: this.groupId }, 'EmailConfig/ChangeGroup')
        .then((res) => {
          if (res.code === 20000) {
            this.$message({
              message: '修改分组成功!',
              type: 'success'
            })
            this.groupId = null
            this.handleClose()
            this.$emit('closeAction')
          } else {
            this.$message({
              message: '修改分组失败!',
              type: 'warning'
            })
          }
        })
    }
  }
}
</script>

<style scoped>

</style>
